<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="ctx"/>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>${gameDetail.name}</title>

    <!-- Favicon -->
    <link rel="icon" href="${ctx}/img/core-img/favicon.ico">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="${ctx}/style.css">
    <link rel="stylesheet" href="${ctx}/css/comments.css" type="text/css">

</head>

<body>
<!-- Preloader -->


<div class="preloader d-flex align-items-center justify-content-center">
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>

<!-- ##### Header Area Start ##### -->
<header class="header-area">
    <!-- Top Header Area -->
    <div class="top-header-area">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12 d-flex align-items-center justify-content-between">
                    <!-- Logo Area -->
                    <div class="logo">
                        <a href="index.jsp"><img src="${ctx}/img/core-img/logo.png" alt=""></a>
                    </div>

                    <!-- Search & Login Area -->
                    <div class="search-login-area d-flex align-items-center">
                        <!-- Top Search Area -->
                        <div class="top-search-area">
                            <form action="fuzzyFind" method="post">
                                <label for="topSearch"></label><input type="search" name="gameName" id="topSearch"
                                                                      placeholder="搜索游戏">
                                <button type="submit" class="btn"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                        <!-- Login Area -->
                        <div class="login-area">
                            <c:choose>
                            <c:when test="${user==null}">
                            <a href="login_register.jsp">
                                <span>登陆 / 注册</span>
                                </c:when>
                                <c:otherwise>
                                <a href="showUserInfo?id=${user.id}">
                                    <span id="userIsLogin">Welcome ${user.name}</span>
                                    </c:otherwise>
                                    </c:choose>
                                    <i class="fa fa-lock" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navbar Area -->
    <div class="egames-main-menu" id="sticker">
        <div class="classy-nav-container breakpoint-off">
            <div class="container">
                <!-- Menu -->
                <nav class="classy-navbar justify-content-between" id="egamesNav">

                    <!-- Navbar Toggler -->
                    <div class="classy-navbar-toggler">
                        <span class="navbarToggler"><span></span><span></span><span></span></span>
                    </div>

                    <!-- Menu -->
                    <div class="classy-menu">

                        <!-- Close Button -->
                        <div class="classycloseIcon">
                            <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                        </div>

                        <!-- Nav Start -->
                        <div class="classynav">
                            <ul>
                                <li><a href="index.jsp">首页</a></li>
                                <li><a href="user_gameList?pageNum=1">全部游戏</a>

                                </li>
                                <li><a href="post.jsp">文章</a>
                                    <ul class="dropdown">
                                        <li><a href="post.jsp">全部文章</a></li>
                                        <li><a href="single-post.jsp">单篇文章</a></li>
                                    </ul>
                                </li>
                                <li><a href="showLibrary/${user.id}">查看我的库</a>
                                </li>
                                <li><a href="items/${user.id}">查看购物车</a>
                                </li>
                                <li><a href="contact.jsp">联系我们</a></li>
                            </ul>
                        </div>
                        <!-- Nav End -->
                    </div>

                    <!-- Top Social Info -->
                    <div class="top-social-info">
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Pinterest"><i
                                class="fa fa-pinterest" aria-hidden="true"></i></a>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Facebook"><i
                                class="fa fa-facebook" aria-hidden="true"></i></a>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"
                                                                                                  aria-hidden="true"></i></a>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Dribbble"><i
                                class="fa fa-dribbble" aria-hidden="true"></i></a>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Behance"><i class="fa fa-behance"
                                                                                                  aria-hidden="true"></i></a>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="Linkedin"><i
                                class="fa fa-linkedin" aria-hidden="true"></i></a>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>
<!-- ##### Header Area End ##### -->

<!-- ##### Breadcrumb Area Start ##### -->
<div class="breadcrumb-area bg-img bg-overlay" style="background-image: url(${ctx}/img/gameImg/${gameDetail.img});">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <!-- Breadcrumb Text -->
            <div class="col-12">
                <div class="breadcrumb-text">
                    <h2>${gameDetail.name}</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ##### Breadcrumb Area End ##### -->

<!-- ##### Single Game Review Area Start ##### -->
<section class="single-game-review-area section-padding-100">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="single-game-img-slides">
                    <div id="gameSlides" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="${ctx}/img/bg-img/35.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="${ctx}/img/bg-img/36.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="${ctx}/img/bg-img/37.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="${ctx}/img/bg-img/38.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="${ctx}/img/bg-img/39.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="${ctx}/img/bg-img/40.jpg" alt="">
                            </div>
                        </div>
                        <ol class="carousel-indicators">
                            <li data-target="#gameSlides" data-slide-to="0" class="active"
                                style="background-image: url(img/bg-img/35.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="1"
                                style="background-image: url(img/bg-img/36.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="2"
                                style="background-image: url(img/bg-img/37.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="3"
                                style="background-image: url(img/bg-img/38.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="4"
                                style="background-image: url(img/bg-img/39.jpg);"></li>
                            <li data-target="#gameSlides" data-slide-to="5"
                                style="background-image: url(img/bg-img/40.jpg);"></li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="row align-items-center">
            <!-- *** Review Area *** -->
            <div class="col-12 col-md-6">
                <div class="single-game-review-area style-2 mt-70">
                    <div class="game-content">
                        <span class="game-tag">${gameDetail.tag}</span>
                        <a href="#" class="game-title">${gameDetail.name}</a>
                        <div class="game-meta">
                            <a href="#" class="game-date">开发商：${gameDetail.developer}</a>
                        </div>
                        <p>${gameDetail.description}</p>
                        <!-- Download & Rating Area -->
                        <div class="download-rating-area">
                            <div class="download-area">
                                <a href="#" style="color:green;">原价：${gameDetail.price}</a>
                                <a href="#" style="color:red">折后价：${gameDetail.discountprice}</a>
                            </div>
                            <div class="rating-area mt-30">
                                <h3><a href="addCartItem/${user.id}/${game.id}" class="text-info">加入购物车</a></h3>
                                <div class="stars">
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- *** Barfiller Area *** -->
            <div class="col-12 col-md-6">
                <div class="egames-barfiller">
                    <!-- Single Barfiller -->
                    <div class="single-barfiller-area"></div>
                    <!-- Single Barfiller -->
                    <%--                    <div class="single-barfiller-area" id="showComments">--%>
                    <div class="detailBox">
                        <div class="titleBox">
                            <label style="color: red">关于此游戏的评论</label>
                            <button type="button" class="close" aria-hidden="true">&times;</button>
                        </div>
                        <div class="actionBox">
                            <ul class="commentList" id="showComments">
<%--                                评论区--%>
                            </ul>

                            <form action="addComments" class="form-inline" role="form" onsubmit="return check()">
                                <input type="hidden" name="uid" value="${user.id}">
                                <input type="hidden" name="gid" value="${gameDetail.id}">
                                <div class="form-group">
                                    <input class="form-control" type="text" name="comments"
                                           placeholder="请勿ghs，最大支持255个汉字" autocomplete="off" id="publishComments"/>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary" type="submit">发表评论</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ##### Single Game Review Area End ##### -->

<!-- ##### Footer Area Start ##### -->
<footer class="footer-area">
    <!-- Main Footer Area -->
    <div class="main-footer-area section-padding-100-0">
        <div class="container">
            <div class="row">
                <!-- Single Footer Widget -->
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="single-footer-widget mb-70 wow fadeInUp" data-wow-delay="100ms">
                        <div class="widget-title">
                            <a href="index.jsp"><img src="${ctx}/img/core-img/logo2.png" alt=""></a>
                        </div>
                        <div class="widget-content">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris velit arcu, scelerisque
                                dignissim massa quis, mattis facilisis erat. Aliquam erat volutpat. Sed efficitur diam
                                ut interdum ultricies.</p>
                        </div>
                    </div>
                </div>

                <!-- Single Footer Widget -->
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="single-footer-widget mb-70 wow fadeInUp" data-wow-delay="300ms">
                        <div class="widget-title">
                            <h4>游戏预览</h4>
                        </div>
                        <div class="widget-content">
                            <nav>
                                <ul>
                                    <li><a href="#">Doom</a></li>
                                    <li><a href="#">Grand Theft Auto</a></li>
                                    <li><a href="#">Bloodborne</a></li>
                                    <li><a href="#">God of war</a></li>
                                    <li><a href="#">Persona 5</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>

                <!-- Single Footer Widget -->
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="single-footer-widget mb-70 wow fadeInUp" data-wow-delay="500ms">
                        <div class="widget-title">
                            <h4>技巧链接</h4>
                        </div>
                        <div class="widget-content">
                            <nav>
                                <ul>
                                    <li><a href="#">Testimanials</a></li>
                                    <li><a href="#">Reviews</a></li>
                                    <li><a href="#">New Games</a></li>
                                    <li><a href="#">Forum</a></li>
                                    <li><a href="#">Contact</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>

                <!-- Single Footer Widget -->
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="single-footer-widget mb-70 wow fadeInUp" data-wow-delay="700ms">
                        <div class="widget-title">
                            <h4>新鲜玩意</h4>
                        </div>
                        <div class="widget-content">
                            <nav>
                                <ul>
                                    <li><a href="#">Doom</a></li>
                                    <li><a href="#">Grand Theft Auto</a></li>
                                    <li><a href="#">Bloodborne</a></li>
                                    <li><a href="#">God of war</a></li>
                                    <li><a href="#">Persona 5</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Copywrite Area -->
    <div class="copywrite-content">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12 col-sm-5">
                    <!-- Copywrite Text -->
                    <p class="copywrite-text"><a href="#">
                        Copyright &copy; 2018.Company name All rights reserved.</a><br>
                        <a target="_blank" href="#">金雕国王未来科技有限公司</a>
                    </p>
                </div>
                <div class="col-12 col-sm-7">
                    <!-- Footer Nav -->
                    <div class="footer-nav">
                        <ul>
                            <li><a href="index.jsp">首页</a></li>
                            <li><a href="user_gameList?pageNum=1">游戏</a></li>
                            <li><a href="post.jsp">文章</a></li>
                            <li><a href="#">游戏预览</a></li>
                            <li><a href="contact.jsp">联系我们</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- ##### Footer Area End ##### -->

<!-- ##### All Javascript Script ##### -->

<!-- jQuery-2.2.4 js -->
<script src="${ctx}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- Popper js -->
<script src="${ctx}/js/bootstrap/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="${ctx}/js/bootstrap/bootstrap.min.js"></script>
<!-- All Plugins js -->
<script src="${ctx}/js/plugins/plugins.js"></script>
<!-- Active js -->
<script src="${ctx}/js/active.js"></script>


<script type="application/javascript">
    function getObj(id) {
        var Obj = document.getElementById(id).value;
        return Obj;
    }

    //检查方法
    function check() {
        if (getObj("publishComments") === "") {
            alert("请输入评论");
            document.getElementById("publishComments").focus;
            return false;//false:阻止提交表单
        }
    }


    $(function showComments() {
        $.ajax({
            type: 'post',
            url: "showAllComments",
            data: {"gid":${gameDetail.id}}
        }).success(function (data) {
                var comments = "";
                var i;
                for (i in data) {
                    comments += "<li>";
                    comments += "<div class='commenterImage'>";
                    comments += "<img src='${ctx}/upload/" + data[i][4] + "' alt='' />";
                    comments += "</div>";
                    comments += "<div class='commentText'>" + data[i][3] + "</div>" + "</li>";
                    comments += "<p id='coverDel'>" + data[i][1] + "</p>";
                    comments += "<span class='date sub-text'>" + data[i][2] + "</span>";
                    document.getElementById("showComments").innerHTML = comments;
                    console.log(data[i]);
                }
            }
        )
    });


</script>
</body>

</html>